Using the Trajectory Layout nodes

Use the Trajectory Layout nodes to arrange items along a trajectory path. You can create simple line and circle trajectories in Kanzi Studio and can import more complex spline trajectories you created in third-party tools. See Using spline trajectories.

Creating a Trajectory Layout node

To create a Trajectory Layout node:

  1. In the Project press Alt and right-click the node where you want to create a Trajectory Layout node and select either Trajectory Layout 3D, or Trajectory Layout 2D.
    Note that you can create a 3D node only inside 3D nodes, and 2D node only inside 2D nodes.
    To see the trajectory, in the Preview click and use the drop-down menu to enable visualization of Debug objects.
  2. In the Project add child nodes to the Trajectory Layout node.
    For example, if you created a Trajectory Layout 3D node, add several Sphere nodes, if you created a Trajectory Layout 2D node, add several Image nodes.
    As you add child nodes, the Trajectory Layout node positions them along the trajectory used by the Trajectory Layout node.
  3. (Optional) Kanzi Studio creates and uses a circle trajectory by default. You can use a circle, line, or a spline trajectory. See Trajectories.

Adjusting the distance between items in a Trajectory Layout node

The Trajectory Layout node automatically calculates the distance between its child nodes.

To adjust the distance between the child nodes in a Trajectory Layout node, in the Project select the Trajectory Layout node and in the Properties add and set the Override Distance property.

Adjusting the position of items in a Trajectory Layout node

By default the Trajectory Layout node arranges its child nodes from the start of the trajectory spline.

To adjust the starting position of the Trajectory Layout node child nodes on the trajectory, in the Project select the Trajectory Layout node and in the Properties add and set the Start Offset property.

Setting the background of a Trajectory Layout 2D node

Use brushes to set the background of 2D nodes. In Kanzi all 2D nodes by default have transparent background.

To set the background:

  1. Create a Color Brush, a Texture Brush, or a Material Brush. See Using brushes.
  2. In the Project select the 2D node the background of which you want to paint.
    Note that you can set only the background of 2D nodes.
  3. In the Properties click , add the Background Brush property, and select the brush you created in the first step.

Using the Trajectory Layout 3D node in the API

To create a Trajectory Layout 3D object:

// Create a Trajectory Layout 3D named Trajectory.
TrajectoryLayout3DSharedPtr trajectoryLayout = TrajectoryLayout3D::create(domain, "Trajectory");

To set the trajectory you want the trajectory layout to use:

// Use a trajectory with the resource ID MyTrajectory as the trajectory for the trajectory layout.
trajectoryLayout->setTrajectoryResourceID(ResourceID("MyTrajectory"));

To create a trajectory and use it in a trajectory layout:

// Create a circle trajectory named Circle with radius of 4 device independent units.
// Set the trajectory layout to use it.
TrajectorySharedPtr trajectoryResource = Trajectory::createCircle(Vector3(), Vector3::up(), 0.0f, 4.0f, domain, "Circle");
trajectoryLayout->setUserTrajectory(trajectoryResource);

To add items to a trajectory layout:

// Create cube meshes and add them as items of the trajectory layout.
// Items on the trajectory appear in the order you add them to the trajectory layout.
Model3DSharedPtr item1 = Model3D::createCube(domain, "item1", 1.0f, KanziThemeRed);
trajectoryLayout->addChild(item1);
Model3DSharedPtr item2 = Model3D::createCube(domain, "item2", 1.0f, KanziThemeGreen);
trajectoryLayout->addChild(item2);
Model3DSharedPtr item3 = Model3D::createCube(domain, "item3", 1.0f, KanziThemeBlue);
trajectoryLayout->addChild(item3);
Model3DSharedPtr item4 = Model3D::createCube(domain, "item4", 1.0f, KanziThemeOrange);
trajectoryLayout->addChild(item4);
Model3DSharedPtr item5 = Model3D::createCube(domain, "item5", 1.0f, KanziThemeGray);
trajectoryLayout->addChild(item5);

To manually position items in a trajectory layout:

// Position an item in the middle of the trajectory.
TrajectoryLayout3D::setOverrideOffset(*item2, 0.5f);

// Set the distance between the items to one third of the length of the trajectory.
trajectoryLayout->setOverrideDistance(0.3f);

For details, see the API reference.

Using the Trajectory Layout 2D node in the API

To manually position items in a trajectory layout:

// Position an item in the middle of the trajectory.
TrajectoryLayout3D::setOverrideOffset(*item2, 0.5f);

// Set the distance between the items to one third of the length of the trajectory.
trajectoryLayout->setOverrideDistance(0.3f);

For details, see the API reference.

See also

Using the Flow Layout nodes

Using the Stack Layout nodes

Layout control nodes

Using the Trajectory List Box 3D node

Using circle trajectories

Using line trajectories

Using spline trajectories